@import '../../styles/vars.scss';

.x-list {
  border: 1px solid;
  list-style: none;
  border-radius: 4px;

  .x-list-item {
    border-top: 1px solid;
    padding: 0.5rem 1rem;

    &:first-child {
      border-top: 0;
    }
  }

  .x-list-title {
    padding: 0.5rem 1rem;
  }
}

@mixin typed-list($border-color, $hover-bg-color, $title-font-color) {
  border-color: $border-color;

  .x-list-item {
    border-top-color: $border-color;

    &:hover {
      background-color: $hover-bg-color;
    }
  }

  .x-list-title {
    background-color: $border-color;
    color: $title-font-color;
  }
}

.x-list-default {
  @include typed-list($color-default-6, $color-default-1, $color-font-dark);
}

.x-list-primary {
  @include typed-list($color-primary-6, $color-primary-1, $color-font-light);
}

.x-list-success {
  @include typed-list($color-success-6, $color-success-1, $color-font-light);
}

.x-list-info {
  @include typed-list($color-info-6, $color-info-1, $color-font-light);
}

.x-list-danger {
  @include typed-list($color-danger-6, $color-danger-1, $color-font-light);
}

.x-list-warning {
  @include typed-list($color-warning-6, $color-warning-1, $color-font-light);
}

.x-list-bili {
  @include typed-list($color-bili-6, $color-bili-1, $color-font-light);
}
